<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="nve">
        <a href="/home">one</a>
        <a href="/server">two</a>
        <a href="/mine">three</a>
    </div>
    <div class="content">

    </div>

</body>

</html>
<script>

    //history路由
    // 思路：点击不同的按钮，通过history.pushState（）切换不同的路由地址，然后根据不同的路由地址调用
    // 不同的函数 渲染不同的内容

    var on = document.querySelectorAll('a')
    on.forEach((item) => {
        //给每个a标签绑定点击事件
        item.onclick = function (e) {
            e.preventDefault();
            //借用history对象的pushState()方法 添加一个新的历史记录  pushState()添加一个新的历史记录

            //this.href获取的是，当前点击的a标签的href属性值
            history.pushState({ title: '', url: '' }, '', this.href)

            //根据不同的url地址，渲染不同的内容
            switch (location.pathname) {
                case '/home': home_page(); break;
                case '/server': server_page(); break;
                case '/mine': mine_page(); break
            }
            // return false  阻止a标签的的默认行为(跳转到其他页面)

        }
    })

    function home_page() {
        document.querySelector('.content').innerHTML = 'one的内容'
    }
    function server_page() {
        document.querySelector('.content').innerHTML = 'two的内容'
    }
    function mine_page() {
        document.querySelector('.content').innerHTML = 'therr的内容'
    }
</script>